import React, { Component } from "react";
// 引入 ECharts 主模块
import echarts from "echarts/lib/echarts";
import ReactEcharts from "echarts-for-react";
import chinaJson from "echarts/map/json/china.json";
import "echarts-gl";
echarts.registerMap("china", chinaJson);
export default class EchartsRadar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      alirl: []
    };
    // this.indicator = []
  }
  componentDidMount() {
    this.alirlData();
  }
  alirlData() {
    var alirl = [
      [[121.15, 31.89], [109.781327, 39.608266]],
      [[120.38, 37.35], [122.207216, 29.985295]],
      [[123.97, 47.33], [120.13, 33.38]],
      [[118.87, 42.28], [120.33, 36.07]],
      [[121.52, 36.89], [117.93, 40.97]],
      [[102.188043, 38.520089], [122.1, 37.5]],
      [[118.58, 24.93], [101.718637, 26.582347]],
      [[120.53, 36.86], [121.48, 31.22]],
      [[119.46, 35.42], [122.05, 37.2]],
      [[119.97, 35.88], [116.1, 24.55]],
      [[121.05, 32.08], [112.02, 22.93]],
      [[91.11, 29.97], [118.1, 24.46]]
    ];
    this.setState({ alirl: alirl });
  }
  getOption() {
    return {
      title: {
        text: "全国3D地图",
        x: "center",
        top: "20",
        textStyle: {
          color: "#333",
          fontSize: 18
        }
      },
      geo3D: {
        map: "china",
        roam: true,
        itemStyle: {
          areaColor: "#f00",
          opacity: 1,
          borderWidth: 0.8,
          borderColor: "#7dc8d7"
        },
        label: {
          show: true,
          textStyle: {
            color: "#fff", //地图初始化区域字体颜色
            fontSize: 12,
            opacity: 1,
            backgroundColor: "rgba(53,171,199,0)"
          }
        },
        emphasis: {
          //当鼠标放上去  地区区域是否显示名称
          label: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 12
            }
          },
          itemStyle: {
            areaColor: "#1cc29f"
          }
        },
        // shading: 'lambert',
        light: {
          //光照阴影
          main: {
            color: "#22374d", //光照颜色
            intensity: 1.2, //光照强度
            //shadowQuality: 'high', //阴影亮度
            shadow: false, //是否显示阴影
            alpha: 45,
            beta: 20
          },
          ambient: {
            intensity: 0.1
          }
        }
      },
      series: [
        //画线
        {
          type: "lines3D",
          coordinateSystem: "geo3D",
          effect: {
            show: true,
            trailWidth: 4,
            trailOpacity: 0.5,
            trailLength: 0.3,
            constantSpeed: 5
          },

          blendMode: "lighter",
          lineStyle: {
            width: 0.2,
            opacity: 0.05
          },
          data: this.state.alirl
        }
      ]
    };
  }

  render() {
    return (
      <div className="echartsRadar">
        <ReactEcharts
          option={this.getOption()}
          notMerge={true}
          lazyUpdate={true}
          style={{ width: "100%", height: "calc(100vh - 260px)" }}
        />
      </div>
    );
  }
}
